<!--订单详情-->
<template>
	<div>	
		<van-popup
		  v-model="showEvaluatePopup"
		  position="right"
		  :overlay="false"
		  :style="{ height: '100%',width:'100%' }"
		> 		
		<div class="html_a">
			<van-nav-bar
			  title="查看评价"
			  left-arrow
			  :border="false"
			  class=""
			>	
			  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="showEvaluatePopup=false"/>
		    </van-nav-bar>	
		    
		    
		    <div style="display: flex;align-items: center;justify-content: center;padding: 20px 0;">
		    	<img src="../../../../static/img/lanhu/91.png" alt="" style="width: 50%;"/>
		    </div>
	        
	        <div class="b" v-if="hasFirst">
	        	<div class="b1">
	        		<img :src="info.avatar" alt="" />
	        	</div>
	        	
	        	<div class="b2">
	        		<div class="c1">
	        			<div class="d1">{{info.nickName}}</div>
	        			<div class="d2">{{info.commentTxt}}</div>
	        			<div class="d4">{{info.commentAddtime}}</div>
	        			<div class="d5">
	        				<div class="e1"><img :src="info.goodsImage" alt="" /></div>
	        				<div class="e2">
	        					<div class="f1">{{info.comName}}</div>
	        					<div class="f2">交易成功时间 {{info.ordersFinishTime}}</div>
	        				</div>
	        			</div>
	        		</div>
	        		<div class="c2" v-if="info.commentIsgood>0">
	        			<span class="d3">
	        				<img src="" alt="" />
	        			</span>
	        		</div>
	        	</div>
	        	
	        </div>
	
			
			<div class="interval"></div>

			<div class="h">
				<div class="i">
					<span class="i1"></span>
					<span class="i2">追评 * {{list.length}}</span>
				</div>
				<div class="j" v-for="item in 13">
					<div class="item" v-for="item in list">
			        	<div class="b1">
			        		<img :src="item.avatar" alt="" />
			        	</div>
			        	
			        	<div class="b2">
			        		<div class="c1">
			        			<div class="d1">{{item.nickName}}</div>
			        			<div class="d2">{{item.commentTxt}}</div>
			        			<div class="d6" v-if="item.commentImage">
			        				<img :src="section" alt="" v-for="section in formatImg(item.commentImage)"/>
			        			</div>
			        			<div class="d4">{{item.commentAddtime}}</div>
			        		</div>
			        		<div class="c2" v-if="item.commentIsgood>0">
			        			<span class="d3">
			        				<img src="../../../../static/img/lanhu/66.png" alt="" style="width: 16px;"/>
			        			</span>
			        		</div>
			        	</div>					
					</div>			
				</div>
			</div>							  
	   
		</div>


			<div class="k">
				<div class="k1">
					<van-button color="#ffda44" block class="d2" @click="append">追加评价</van-button>
				</div>
			</div>		
		</van-popup>
	</div>	
</template>

<script>

import {getFun,getTimer} from '@/api/publicFun.js'	 
let publicFun=getFun()		
export default {
	name: 'lookEvaluate',	
	data() {
       return {
          ordersId:'',
          userId:'',
          goodsId:'',
          url1:this.$api+'/marketorderservice/api/v1/market/commentInfo',
          url2:this.$api+'/marketorderservice/api/v1/market/listComment',
          info:{},
          list:[],
          showEvaluatePopup:false,
          hasFirst:false
       }
	},
	methods: {	
	  showWin(item){
	  	this.showEvaluatePopup=true
	  	this.ordersId=item.ordersId
	  	this.goodsId=item.goodsId
//		this.getData1()
		this.getData2()	  	
	  },
      append(){
      	  let arg='[{"ordersId":"'+this.ordersId+'"},{"comId":"'+this.goodsId+'"}]' 
		  this.link('/market/order/appendEvaluate',arg)	            	
      },
      formatImg(str){
      	return str.split(',')
      },
      // 加载第一条数据
      getData1(){      	
      	let params1={
      		ordersId:this.ordersId,
      		userId:this.userId
      	}
      	let that=this
	    this.$Axios.Post(this.url1,params1)
	      .then(function(res) {
	      	if(res.commentInfo){
	      	  that.hasFirst=true
	      	  that.info=res.commentInfo 
	      	}else{
	      	  that.hasFirst=false	
	      	}
            
	    }) 	      	
      },
      // 加载列表
      getData2(){      	
      	let params1={
      		ordersId:this.ordersId,
      		userId:this.userId
      	}
      	let that=this
	    this.$Axios.Post(this.url2,params1)
	      .then(function(res) {
	      	console.log(res)
            that.list=res.list
	    }) 	      	
      }      
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.ordersId=this.$router.currentRoute.query.ordersId;
		this.userId=this.$router.currentRoute.query.userId;	
		this.goodsId=this.$router.currentRoute.query.comId
	}
}	
</script>

<style scoped="" >
*{box-sizing: border-box;}
.html_a{background: #fff;min-height: 100%;width: 100%;position: absolute;}
.b{padding: 10px 15px;display: flex;}
.b1 img{width: 24px;height: 24px;display: block;border-radius: 4px;}
.b2{margin-left: 10px;display: flex;justify-content: space-between;flex: 1;}
.d1{color: #aaa;}
.d2{margin: 8px 0;font-size: 16px;width: 100%;word-break: break-all;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}
.d4{color: #aaa;margin-bottom: 8px;}
.d5{padding:10px;background: #f4f5f9;display: flex;align-items: center;}
.d5 img{width: 50px;height: 50px;display: block;border-radius: 4px;}
.e2{margin-left: 10px;}
.f1{margin-bottom: 8px;}
.f2{color: #aaa;}
.interval{background: #edeef3;height: 10px;}
.h{padding: 10px 15px 60px;}
.i{font-size: 16px;display: flex;}
.i1{width: 4px;display: block;margin-top: 3px;
height: 16px;background: #ffda44;margin-right: 8px;border-radius: 6px;}
.j{padding: 20px 0;}
.j .item{display: flex;}

.d6{display: flex;margin-bottom: 8px;}
.d6 img{display: block;width: 40px;height: 40px;border-radius: 4px;margin-right: 4px;}


.van-button__text{color: #000;font-size: 16px;}
</style>